<template>
  <div class="index-box">
    <BetweenLayout>
      <template #left>
        
        <!-- 官网地址 -->
        <Tip title="官网地址" type="code">
          <template #icon>
            <Link />
          </template>
          <template #content>
            <n-button
              text
              tag="a"
              href="https://pinia.esm.dev/"
              target="_blank"
              type="primary"
            >
              https://pinia.esm.dev/
            </n-button>
          </template>
        </Tip>
        <!-- 源码地址 -->
        <Tip title="仓库地址" type="code">
          <template #icon>
            <Link />
          </template>
          <template #content>
            <n-button
              text
              tag="a"
              href="https://github.com/TuSimple/naive-ui"
              target="_blank"
              type="primary"
            >
              https://github.com/TuSimple/naive-ui
            </n-button>
          </template>
        </Tip>
        <n-card title="安装">
          <n-code :code="installCode" language="javascript" />
        </n-card>
        <n-card title="注册">
          <n-code :code="useCode" language="javascript" />
        </n-card>
      </template>
      <template #right>
        <PiniaLogo />
      </template>
    </BetweenLayout>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { loading } from '@/utils/loading'
import PiniaLogo from '@/components/PiniaLogo/index.vue'
import { installCode, useCode } from './code'
import { Link } from '@vicons/ionicons5'
import BetweenLayout from '@/components/BetweenLayout/index.vue'
import Tip from '@/components/Tip/index.vue'

export default defineComponent({
  components: {
    PiniaLogo,
    Link,
    BetweenLayout,
    Tip
  },
  setup() {
    loading()
    return { installCode, useCode, Tip }
  }
})
</script>

<style lang="scss" scoped>
.index-box {
  width: 100%;
}
</style>
